<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>

	<h:outputStylesheet library="css" name="index.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<h:outputStylesheet library="css" name="jquery.maximage.min.css" />
	<h:outputStylesheet library="js" name="jquery.maximage.min.js" />
	<h:outputStylesheet library="js" name="jquery.easing.1.3.js" />
	<h:outputStylesheet library="js" name="jquery.cycle.all.js" />

	<link rel="shortcut icon" type="image/x-icon"
		href="#{request.contextPath}/resources/imagens/favicon.ico" />
	<title>QBank</title>

	<script type="text/javascript" charset="utf-8">
		$(function() {
			var imgs = $('#maximage img');
			imgs.sort(function() {
				return 0.5 - Math.random()
			});
			$('#maximage').html(imgs);

			$('#maximage').maximage({
				cycleOptions : {
					speed : 3000
				}
			});
		});
	</script>
</h:head>
<h:body>

	<div id="maximage">

		<h:graphicImage id="bank" value="/resources/imagens/bank.jpg" />
		<h:graphicImage id="bank1" value="/resources/imagens/bank1.jpg" />
		<h:graphicImage id="bank2" value="/resources/imagens/bank2.jpg" />

	</div>



</h:body>
</html>